﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Astoria DataSource</title>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/Chrome.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager EnablePartialRendering="False" ID="scrpManager" runat="server" />
        <div>
            <Raj:AstoriaDSExtender runat="server" ID="asbehaviorPnl" BehaviorID="asBehavior"
                TargetControlID="btnAstoria" DatabaseURI="http://astoria.sandbox.live.com/northwind/northwind.rse"
                DataFormat="json" StartPageIndex="0" PageSize="1" Query="/Categories" ExpandRecord="Products"
                OnClientDataDownloadError="dwError" OnClientDataReady="endDownload" ErrorPanelId="divContainsErrorInfo" />
        </div>
        <asp:Button runat="server" ID="btnWithImage" Text="Image Button" CssClass="imgButton" />
        <table style="position: absolute; top: 80px; left: 100px; width: 80%">
            <tr class="chromeToolbar">
                <td>
                    <img alt="ProgressBar Image" src="images/Loading.gif" id="imgLoading" style="display: none;" />
                    <asp:Button runat="server" ID="btnAstoria" Text="Data Bind" Style="display: none" />
                    <div class="chromemenu">
                        <ul>
                            <li><a href="#" id="btnPrevPage">Prev</a> </li>
                            <li>Page #:
                                <input type="text" size="4" id="txtGopageNumber" />
                            </li>
                            <li><a href="#" id="btnGoToPage">Go</a> </li>
                            <li><a href="#" id="btnNextPage">Next</a> </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="divContainsData" class="grey" style="height: 90%; width: 95%; overflow: scroll;">
                    </div>
                </td>
            </tr>
        </table>
        <div style="position: absolute; top: 10px; right: 100px; height: 50px; width: 400px;"
            id="divContainsErrorInfo" class="yellow">
        </div>
        <input type="button" id="btnDummy" value="Test Data Retrieval" onclick="startDownload();" />

        <script language="javascript" type="text/javascript">
             function pageLoad() {
                startDownload();
                $addHandler($get("btnNextPage"),"click",GoNext);
                $addHandler($get("btnPrevPage"),"click",GoPrev);
                $addHandler($get("btnGoToPage"),"click",GoPageNumber);
                 
            }
            //The dataReady Event handler
            function dataReadyHandler(sender,eventArgs) {
                alert("The Data returned is :: "+eventArgs.get_data());
            }
            //The dataDownloadError Event handler
            function dwError(sender,eventArgs) {
                Sys.Debug.trace("error Code ::"+eventArgs.get_error().ErrorCode);
                Sys.Debug.trace("error Message ::"+eventArgs.get_error().ErrorMessage);
            }
            function GoPageNumber(eventArgs){
                $find("asBehavior").set_currentPageIndex( $get("txtGopageNumber").value );
                $find("asBehavior").DataBind();
            }
            function GoNext(eventArgs){
                $find("asBehavior").set_currentPageIndex($find("asBehavior").get_currentPageIndex()+1);
                $find("asBehavior").DataBind();
            }
            
            function GoPrev(eventArgs){
                if($find("asBehavior").get_currentPageIndex()==0){
                    alert('No \"Back\" to go Back to ');
                }else {
                    $find("asBehavior").set_currentPageIndex($find("asBehavior").get_currentPageIndex()-1);
                    $find("asBehavior").DataBind();
                }
            }
           
            function startProgress() {
                $get("imgLoading").style.display="block"
                }
            function stopProgress() {
                $get("imgLoading").style.display="none"
            }
            function startDownload() {
                startProgress();
                $find("asBehavior").DataBind();
                return false;
            }
            function endDownload(source,eventArgs) {
                stopProgress();
                var listData=eval( '(' + eventArgs.get_data() + ')' );
                //No Data Returned
                //Sys.Debug.fail("Empty Data");
//                if( listData.__type === undefined){
//                  var _listElement = $get("divContainsData");
//                 _listElement.innerHTML ="<UL>"; 
//                 _listElement.innerHTML +="<LI class='white'>No data Available</LI>";
//                 _listElement.innerHTML +="</UL>";
//                }
//                else {
                BindList(listData);
//                }
            }
            
            function BindList( listData ) {
                
                var _listElement = $get("divContainsData");
                _listElement.innerHTML ="<UL>"; 
                for( var loopIndex=0;loopIndex < listData.length ; loopIndex++ ) {
                    _listElement.innerHTML+= "<LI class='white'> CategoryID : "+ listData[loopIndex].CategoryID+"</LI>";
                    _listElement.innerHTML+= "<LI class='white'> CategoryName : "+ listData[loopIndex].CategoryName+"</LI>";
                    _listElement.innerHTML+="<UL>";
                            var products = listData[loopIndex].Products;
                            for( var prodIndex=0;prodIndex < products.length;prodIndex++ ) {
                                    _listElement.innerHTML+= "<LI> ProductName : "+ products[prodIndex].ProductName +"</LI>";
                                    _listElement.innerHTML+= "<LI> QuantityPerUnit : "+ products[prodIndex].QuantityPerUnit +"</LI>";
                                    _listElement.innerHTML+= "<LI> UnitPrice : "+ products[prodIndex].UnitPrice +"</LI>";
                           } 
                        _listElement.innerHTML +="</UL>"; 
                }
                _listElement.innerHTML +="</UL>"; 
            }
        </script>

    </form>
</body>
</html>
